<template>
	<div class="time-chart-box">
		<div id="timeChart"></div>
	</div>
</template>
<script setup>
import { ref, reactive } from "vue";
import echarts from "@/common/utils/echarts.js";

// 月份
let xArr = ref([
	"肖家河-咿薇托育",
	"丰收托育园",
	"神仙树-咿薇托育园",
	"锦城园托育园",
]);
let dataArr = ref([7, 8.2, 6.5, 8]);

let options = reactive({
	grid: {
		right: "0%",
		top: "10%",
		bottom: "15%",
		left: "15%",
	},
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "line",
			lineStyle: {
				type: "solid",
				width: 30,
				color: "rgba(216,240,255,0.1)",
			},
		},
		backgroundColor: "rgba(216,240,255,0.1)",
		textStyle: {
			color: "#D8F0FF",
			textShadowColor: "#3FBFFF",
			textShadowBlur: 2,
		},
		padding: [0, 15, 0, 15],
		borderWidth: 1,
		borderColor: "#6E7A83",
		formatter: (params) => {
			let res = "";
			for (let i = 0; i < params.length; i++) {
				res += `<span>${params[i].value}</span>`;
			}
			return res;
		},
		// position: (point, params, dom, rect, size) => {
		// 	// point: 鼠标位置，如 [20, 40]。
		// 	// params: 同 formatter 的参数相同。
		// 	// dom: tooltip 的 dom 对象。
		// 	// rect: 只有鼠标在图形上时有效，是一个用x, y, width, height四个属性表达的图形包围盒。
		// 	// size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}
		// 	// console.log(point[1]);
		// 	// console.log(params[0]);
		// 	// 固定在顶部
		// 	return [point[0], point[1]];
		// },
	},
	xAxis: {
		type: "category",
		data: xArr.value,
		axisTick: {
			show: false,
		},
		axisLine: {
			show: true,
			color: "rgba(176,215,255,0.4)",
		},
		axisLabel: {
			color: "rgba(216,240,255,0.8)",
			interval: 0,
		},
	},
	yAxis: [
		{
			type: "value",
			name: "单位（时）",
			nameTextStyle: {
				color: "rgba(216,240,255,0.8)",
			},
			axisLabel: {
				color: "rgba(216,240,255,0.8)",
			},
			splitLine: {
				lineStyle: {
					color: "rgba(176,215,255,0.25)",
					type: "dashed",
				},
			},
		},
	],
	series: [
		{
			type: "line",
			smooth: true,
			data: dataArr.value,
			showSymbol: false,
			itemStyle: {
				color: "#00D3FD",
			},
			lineStyle: {
				color: "#00D3FD",
			},
			areaStyle: {
				color: {
					x: 0, //右
					y: 0, //下
					x2: 0, //左
					y2: 1, //上
					colorStops: [
						{
							offset: 0,
							color: "rgba(0,150,255,0.25)",
						},
						{
							offset: 1,
							color: "rgba(0,150,255,0)",
						},
					],
				},
			},
		},
	],
});

let timeChartRef = null;
let initTimeChartData = (v = []) => {
	// console.log('v', v)
	const arr1 = [],
		arr2 = [];
	v.map((item) => {
		const { childcare_name, hours } = item || {};
		arr1.push(childcare_name);
		arr2.push(hours);
	});
	xArr.value.splice(0);
	xArr.value.push(...arr1);
	dataArr.value.splice(0);
	dataArr.value.push(...arr2);
	timeChartRef.setOption(options);
};
const initTimeChart = (v) => {
	timeChartRef = echarts.init(document.getElementById("timeChart"));
	initTimeChartData(v);
};
defineExpose({
	initTimeChart,
});
</script>
<style lang="scss" scoped>
.time-chart-box {
	width: 100%;
	height: 100%;
	#timeChart {
		width: 100%;
		height: 100%;
	}
}
</style>
